<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="姓名：">
              <el-input v-model="person.name" placeholder="姓名" style="width:200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="班组：">
              <el-select v-model="person.client" placeholder>
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float:left">
            <el-button size="mini" type="primary" @click="personQuery">查 询</el-button>
            <el-button size="mini" type="success" @click="handleAdd">新 增</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- "VID":2,"NAME":"李成芬","SIMCARD_NO":"0867597017740348","CLIENT_NO":"00000090101",
    "SEX":"女","PHONE":"13132097100","WORKTYPE":"环卫工","BIRTHDAY":"2020-09-11T00:00:00","WORKDATE":"2020-09-11T00:00:00"-->
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" highlight-current-row border>
      <el-table-column prop="VID" label="人员ID" align="center"></el-table-column>
      <el-table-column prop="NAME" label="姓名" align="center"></el-table-column>
      <el-table-column prop="SIMCARD_NO" label="通讯卡号" align="center"></el-table-column>
      <el-table-column prop="CLIENT_NO" label="班组编号" align="center"></el-table-column>
      <!-- <el-table-column prop="CLIENT_NO" label="班组" align="center"></el-table-column> -->
      <el-table-column prop="SEX" label="性别" align="center"></el-table-column>
      <el-table-column prop="PHONE" label="电话" align="center"></el-table-column>
      <el-table-column prop="WORKTYPE" label="工种" align="center"></el-table-column>
      <el-table-column prop="birthday" label="出生日期" align="center"></el-table-column>
      <el-table-column prop="workdate" label="入职时间" align="center"></el-table-column>
      <el-table-column label="操作"  align="center" >
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 新增人员 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="show"
      width="55%"
      :modal="false"
    >
      <el-form
        ref="newPersonForm"
        :model="newPersonForm"
        label-width="80px"
        class="flex"
      >
        <el-form-item prop="NAME" label="姓名" class="wid50">
          <el-input v-model="newPersonForm.NAME" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="SIMCARD_NO" label="通讯卡号" class="wid50">
          <el-input v-model="newPersonForm.SIMCARD_NO" placeholder="请输入通讯卡号" :disabled="addDialogTitle != '新增人员信息'"></el-input>
        </el-form-item>
        <el-form-item prop="SEX" label="性别" class="wid50">
          <el-radio v-model="newPersonForm.SEX" label="男">男</el-radio>
          <el-radio v-model="newPersonForm.SEX" label="女">女</el-radio>
        </el-form-item>
        <el-form-item prop="WORKTYPE" label="工种" class="wid50">
          <el-select v-model="newPersonForm.WORKTYPE" placeholder="请选择工种">
            <el-option value="班组长"></el-option>
            <el-option value="环卫工"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="CLIENT_NO" label="班组" class="wid50">
          <el-select v-model="newPersonForm.CLIENT_NO" placeholder="请选择班组">
            <el-option
              v-for="item in person.clientList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" class="wid50">
          <el-date-picker
            v-model="newPersonForm.BIRTHDAY"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="入职时间" class="wid50">
          <el-date-picker
            v-model="newPersonForm.WORKDATE"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择入职时间"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="PHONE" label="电话号码" class="wid50">
          <el-input
            v-model="newPersonForm.PHONE"
            placeholder="请输入电话"
            maxlength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>
        <!-- <div class="btns">
          <el-button type="primary" @click="addPerson('newPersonForm')" v-if="!editPersonShow">确定</el-button>
          <el-button
            type="primary"
            @click="saveEditPerson('newPersonForm')"
            v-if="editPersonShow"
          >保存</el-button>
          <el-button type="success" @click="resetForm('newPersonForm')">重置</el-button>
          <el-button type="danger" @click="show = false, person.listShow = true">取消</el-button>
        </div> -->
      </el-form>
      <!-- </div> -->
       <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      // 人员管理
      person: {
        name: '',
        client: '',
        clientList: []
      },
      show: false,
      // 新增人员
      newPersonForm: {
        VID: '',
        NAME: '',
        PHONE: '',
        SIMCARD_NO: '',
        BIRTHDAY: '',
        WORKDATE: '',
        SEX: '男',
        WORKTYPE: '',
        CLIENT_NO: ''
      },
      tableData: [],
      originalData: []
    }
  },
  created () {
    this.getTeamList();
    this.getlistdata();
  },
  methods: {
    async getTeamList () {
      const { data } = await this.$Http.get('DataListCompany/GetTeamListApi?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.person.clientList = data
      // this.attendanceMonth.records.teamList = data
    },
    async getlistdata () {
      var url = 'DataListCompany/GetWorkerListApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      console.log('url=' + url)
      const { data } = await this.$Http.get(url)
      this.originalData = []
      data.forEach(element => {
        element.birthday = formatDate(new Date(element.BIRTHDAY), 'yyyy-MM-dd')
        element.workdate = formatDate(new Date(element.WORKDATE), 'yyyy-MM-dd')
        this.originalData.push(element)
      });
      this.personQuery()
    },
    // 人员管理查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      const { name, client } = this.person
      if (name) this.tableData = this.tableData.filter(item => item.NAME.includes(name))
      if (client) this.tableData = this.tableData.filter(item => client === item.CLIENT_NO)
    },
    
    // 打开新增窗口
    handleAdd () {
      this.addDialogTitle = '新增人员信息'
      //清空编辑框
      this.newPersonForm = {}
      //展示窗口
      this.show = true;
    },
    // 打开编辑窗口
    handleEdit (index, row) {
      this.newPersonForm = Object.assign({}, row);
      this.addDialogTitle = '编辑人员信息'
      this.show = true;
    },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (this.addDialogTitle == '新增人员信息') {
        this.addPerson()
      } else {
        this.saveEdit()
      }
    },
    async addPerson (formName) {
      // for (const k in this.newPersonForm) {
      //   if (this.newPersonForm[k] === '') {
      //     this.$message({
      //       message: '表单项不能为空！！',
      //       type: 'warning'
      //     })
      //     return false
      //   }
      // }
      
      const params = {
            VID: this.newPersonForm.VID,
            Name: this.newPersonForm.NAME,
            SimCardNo: this.newPersonForm.SIMCARD_NO,
            Sex: this.newPersonForm.SEX,
            ClientNo: this.newPersonForm.CLIENT_NO,
            Phone: this.newPersonForm.PHONE,
            WorkType: this.newPersonForm.WORKTYPE,
            BirhDay: this.newPersonForm.BIRTHDAY,
            WorkDate: this.newPersonForm.WORKDATE
          }
      const { data } = await this.$Http.get('/DataListCompany/AddWorkerApi', { params })
      if (data.IsSucess) {
        this.$message({
          message: '新增成功',
          type: 'success'
        })
        this.getlistdata()
        this.resetForm('newPersonForm')
        this.show = false
      }
    },
    async saveEdit (formName) {
      const params = {
            VID: this.newPersonForm.VID,
            Name: this.newPersonForm.NAME,
            SimCardNo: this.newPersonForm.SIMCARD_NO,
            Sex: this.newPersonForm.SEX,
            ClientNo: this.newPersonForm.CLIENT_NO,
            Phone: this.newPersonForm.PHONE,
            WorkType: this.newPersonForm.WORKTYPE,
            BirhDay: this.newPersonForm.BIRTHDAY,
            WorkDate: this.newPersonForm.WORKDATE
          }
      const { data } = await this.$Http.get('/DataListCompany/UpdateWorkerApi', { params })
      if (data.IsSucess) {
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.getlistdata()
        this.resetForm('newPersonForm')
        this.show = false
      }
    },
    // 重置新增人员表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // this.newPersonForm.SIMCARD_NO = ''
      // this.newPersonForm.BIRTHDAY = ''
      // this.newPersonForm.WORKDATE = ''
      this.newPersonForm = {
        show: true,
        NAME: '',
        PHONE: '',
        SIMCARD_NO: '',
        BIRTHDAY: '',
        WORKDATE: '',
        SEX: '男',
        WORKTYPE: '',
        CLIENT_NO: ''
      }
    },
    // 删除
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          VID: row.VID,
        }
        const { data } = await this.$Http.get('DataListCompany/DeleteWorkerApi', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.isVisibleEdit = false
          this.getlistdata()
        }else{
            this.$message.error('删除失败');
        }
      }else{
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }
      
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  overflow-y: scroll;
}

</style>